/* @flow */

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import $ from "jquery";
import Navigation from './Navigation/Navigation';


export default class App extends Component {
    constructor(props){
        super(props);
        this.state ={
            title:"Please select a sub",
            data:[],
            navigationItems : [],
            currentURI : "",
        };

    }

    setSelectedItem = (item) => {
        var _this = this;
        alert("selected :" + item.title);

        this.setState({
            currentURI: item.uri,
            title: item.title
        });
    }

    componentDidMount(){
        var _this = this;
        $.get("data.json", function (result) {
            _this.setState({
                data:result.data,
                navigationItems:result.data.map(function (item, index) {
                    return item.content;
                })
            });
        });
    }

    render() {
        return (
          <div className="App">
            <div className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h2>React Demo</h2>
            </div>
            <p className="App-intro">
              To be or not to be, That is the question
            </p>
              <div>
                  <h1>
                      {this.state.title}
                  </h1>
                  <Navigation
                      items = {this.state.data}
                      currentURI = {this.state.currentURI}
                      itemSelected={this.setSelectedItem}
                  />
              </div>

          </div>
        );
    }
}

